<template>
  <BgVue4>
    <template #imgFixed>
      <img src="@/assets/imgV2/exchange-bg-bottom.jpg" />
    </template>
    <div class="notice">
      <div class="title-style title">
        <img src="@/assets/imgV2/notice/trumpet.png" />
        <span>
          {{ t('home.navigation.tip') }}
        </span>
      </div>
      <div class="block-bor" v-for="(item, index) in notices" :key="index">
        <van-cell is-link :to="'/noticeDetail?id=' + item.id">
          <template #title>
            <div class="item-title">{{ item.title }}</div>
            <div class="center">
              <span class="item-text-samll">{{ item.time }}</span>
            </div>
          </template>
        </van-cell>
      </div>
    </div>
  </BgVue4>
</template>
<script>
import http from '../http'

import BgVue4 from '@/components/BgVue4.vue'

export default {
  data() {
    return {
      notices: [],
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      const res = await http.get('/api/noticeList')
      if (res.code === 200) {
        this.notices = res.data.map((row) => {
          return {
            id: row.id,
            title: row.title,
            time: row.create_time.substr(0, 16).replace('T', ' '),
          }
        })
      }
      if (process.env.NODE_ENV !== 'production') {
        this.notices.push({
          id: '2',
          title: 'xxxxx',
          time: '200222',
        })
      }
    },
  },
  components: { BgVue4 },
}
</script>
<style lang="less" scoped>
.notice {
  position: relative;
  padding: 0 20px;

  .title {
    // height: 44px;
    // padding: 0 15px;
    // color: #fff;
    // font-size: 14px;
    // text-align: left;
    // background: linear-gradient(136deg, #14181b 0%, #222020 100%);
    // font-weight: 500;
    // line-height: 44px;
    font-size: 24px;
    letter-spacing: 2px;

    text-align: center;
    img {
      width: 31px;
      height: 30.5px;
      vertical-align: middle;
      margin-right: 10px;
    }
    span {
      vertical-align: middle;
    }
  }
  .block-bor {
    background-image: linear-gradient(
        0deg,
        rgba(114, 173, 234, 0.62) 0%,
        rgba(210, 230, 251, 0.7) 100%
      ),
      linear-gradient(#2588d4, #2588d4);

    box-shadow: 0px 1px 1px 0px rgba(10, 2, 4, 0.35);
    border-radius: 14px;
    border: solid 1px #4bccf2;
    padding: 7px;
    margin: 7px;
  }

  .van-cell {
    height: 73px;

    background-color: #2588d4;
    border-radius: 14px;
    border: solid 1px #4bccf2;
    padding-right: 4px;
  }

  :deep(.van-icon-arrow) {
    display: flex;
    align-items: center;
    height: auto;
    color: rgba(255, 255, 255, 0.4);
    font-size: 21px;
  }

  .item-title {
    color: #ffffff;

    font-size: 15px;
    letter-spacing: 2px;
  }

  .center {
    display: flex;
    color: #ffffff;

    font-size: 12px;

    letter-spacing: 1px;
    opacity: 0.32;
  }

  .item-text-samll {
    // color: #717273;
    // font-size: 12px;
    // font-weight: 400;
    // margin-left: 7px;
  }
}
</style>
